<template>
    <div class="vue-table-container">
        <slot name="search">

        </slot>
        <div class="table-container pb-4">
            <table class="table">
                <thead>
                <slot name="header"></slot>
                </thead>
                <tbody>
                <slot name="tbody" v-for="(item,index) in dataSource.items" :item="item" :index="index"></slot>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
  export default {
    props: {
      dataSource: {
        type: Object,
        default: []
      },
      queryString:{
        type: Object,
        default: {}
      },
    },
    data: function () {
      return {
      }
    },
    methods: {
      search: function () {
        let self = this
        self.dataSource.fetchData( self.queryString)
      }
    }
  }
</script>
<style lang="scss" scoped>
    .table {
         th {
             border: none;
             color: #6c7d43;
             text-align: center;
            }
         thead {
             th {
                 font-weight: 500;
                 border: none;
                 padding-bottom: 2rem;
                 padding-top: 1.5rem;
                 &:first-child{
                     padding-left: 5rem;
                 }
                 &:last-child{
                     padding-right: 5rem;
                 }
             }
         }
        tbody tr {
            td {
                border: none;
                font-size: 14px;
                color: #828ea6;
                text-align: center;
                &:first-child{
                    padding-left: 5rem;
                }
                &:last-child{
                    padding-right: 5rem;
                }
            }
        }
    }
</style>
